
<div class="self-wrapper">
   <ul class="am-tree" id="firstTree">
    <li class="am-tree-branch am-hide" data-template="treebranch">
      <div class="am-tree-branch-header">
        <button class="am-tree-branch-name">
          <span class="am-tree-icon am-tree-icon-folder"></span>
          <span class="am-tree-label"></span>
        </button>
      </div>
      <ul class="am-tree-branch-children"></ul>
      <div class="am-tree-loader"><span class="am-icon-spin am-icon-spinner"></span></div>
    </li>
    <li class="am-tree-item am-hide" data-template="treeitem">
      <button class="am-tree-item-name">
        <span class="am-tree-icon am-tree-icon-item"></span>
        <span class="am-tree-label"></span>
      </button>
    </li>
  </ul>

  <div id="main" style="width: 100%;height:400px;">
  </div>
</div>
<script type="text/javascript">
  var myChart = null
  var type = '{{ $type }}';
  $.ajax({
      url:'/treeData',
      type:'post',
      data:{
        title:'吴中区园区葑亭大道与瑞华路交叉口',
        type:type
      },
      success(res){
          //创建图表
    myChart = echarts.init(document.getElementById('main'));
  // 指定图表的配置项和数据
  var option = {
    title: {
      text: ''
    },
    tooltip : {
      trigger: 'axis'
    },
    legend: {
      data:res.titles
    },
    xAxis: {
      data:res.times
    },
    yAxis: {},
    series: res.data
  };

  myChart.setOption(option);
      }
    })
</script>
<script type="text/javascript">
  //树形菜单
$(function(){
  $('#firstTree').tree({
    dataSource: function(options, callback) {
      $.ajax({
      url:'/tree',
      type:'get',
      success(res){
       callback({data: options.products || res});
      }
    })
  },
  multiSelect: false,
  cacheItems: true,
  folderSelect: false
  });
  $('body').on('click','.am-tree-branch-children .am-tree-label',function(){
      //更新数据
      $.ajax({
      url:'/treeData',
      type:'post',
      data:{
        title:$(this).text(),
        type:type
      },
      success(res){
        var option = {
          title: {
            text: ''
          },
          tooltip : {
            trigger: 'axis'
          },
          legend: {
            data:res.titles
          },
          xAxis: {
            data:res.times
          },
          yAxis: {},
          series: res.data
      };

  myChart.setOption(option);
      }
    })
  })
})
</script>
